<template>
  <div class="login">
      <nav-bar>
        <template v-slot:left>
              <van-icon name="arrow-left" @click="backHome" />
          </template>
          <template v-slot:center>登录
          </template>
      </nav-bar>
   <div class="content">
          <div class="login_bg">
          <div class="login_con">
              美团
          </div>
      </div>
        <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" color="#ffc400" @click="toRegisiter">
             注册
            </van-button>
                 <van-button round block type="primary" native-type="submit" color="#ffc400" class="regisiter">
             登录
            </van-button>
  </div>
</van-form>
   </div>
  </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
import {useRouter} from 'vue-router'
import NavBar from '../components/common/NavBar.vue'
import { Toast } from 'vant'
export default {
  name:'Login',
  components:{
      NavBar
  },
  setup(){
      const router  =useRouter();
      let data = reactive({
          username:'',
          password:''
      })
      const backHome=()=>{
          router.back();
      }
    //    提交按钮
      const onSubmit =(value)=>{
         if(!localStorage.userInfo){
            Toast('账号未注册,请先注册')
         }else{
             let userInfo = JSON.parse(localStorage.userInfo)
             if(userInfo['用户名']==value['用户名']){
                 if(userInfo['密码']==value['密码']){
                         Toast('登录成功');
                         localStorage.setItem('isLogin','1')
                         router.push('/home')
                 }else{
                     Toast('密码错误')
                 }
                   
             }else{
                 Toast('账号不存在或输入错误')
             }
         }
      }
    // 注册
   const toRegisiter=()=>{
       router.push('/regisiter')
   }
      return {
          ...toRefs(data),
          onSubmit,
          backHome,
          toRegisiter
      }
  }
}
</script>

<style scoped lang="less">
.login{
    height: 100vh;
    background-color: #f4f4f4;
    .content{
        .login_bg{
            width: 100%;
            height:30vh;
            margin: 10px 0 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 16px;
            .login_con{
                width: 150px;
                height: 150px;
                background-color: #ffc400;
                border-radius: 16px;
                text-align: center;
                line-height: 150px;
                font-size: 50px;
                font-weight: 400;
            }
        }
        .regisiter{
            margin-top: 20px;
        }
    }
}
</style>